 
Ext.onReady(function(){
	
	Ext.create('Ext.container.Viewport', {
		width: "100%",
		layout: 'fit',
		items: [
				{
					width: "100%",
					height: 400,
					title: 'the Deeployer',
					layout: 'border',
					items: [
							{
							// xtype: 'panel' implied by default
							title: 'Ambienti',
							region:'west',
							titleCollapse:true,
							xtype: 'panel',
							collapseFirst :true,
							collapseDirection: 'left',
							width: 200,
							collapsible: true,   // make collapsible
							id: 'leftContainer',
							items: [{
										xtype:'toolbar',
										height:30,
										items:[
												{
													xtype:'button',
													text:'add'
												}
										]
									},
									{
										xtype: 'menu',
										floating: false,
										items: [
												{
													xtype: 'menuitem',
													text: 'STAGING',
													
													 
												},
												{
													xtype: 'menuitem',
													text: 'PREPRODUZIONE'
												},
												{
													xtype: 'menuitem',
													text: 'PRODUZIONE'
												},
												
										]
									}
							]
						},
						{
							title: 'Center Region',
							region: 'center',     // center region is required, no width/height specified
							xtype: 'panel',
							html:"assd"
							
						},
						{
							region: 'south',     // position for region
							xtype: 'panel',
							maxHeight:150,
							height: 100,
							split: true,         // enable resizing
							autoScroll:true,
							html: 'Goditi il LOG<br><br><br><br><br><br><br><br>Goduto?',
							bodyStyle: {
								padding: '10px'
							}
							
						}
					],
				}
		]
	});
	
		

});